function indexFourRefresh() {
  indexFour(function () {});
}
setInterval(indexFourRefresh, 5000);
function indexFour(fn) {
  function convertKey(arr, key) {
    let newArr = [];
    arr.forEach((item, index) => {
      let newObj = {};
      for (var i = 0; i < key.length; i++) {
        newObj[key[i]] = item[Object.keys(item)[i]];
      }
      newArr.push(newObj);
    });
    console.log(newArr);
    return newArr;
  }
  // 票卡分类统计
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/tmsAndPer",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          ticketCardSData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".ticketCard_max").text(data.data.max);
            if (ticketCardSData.length !== 0) {
              ticketCardSChart();
            } else {
              $(".ticketCardSChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".ticketCardSChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".ticketCardSChart").html("<div class='noData'>今日暂无数据</div>");
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 线路延误事件数
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/lnDlyNr",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          lineDelayData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".lineDelay_total").text(data.data.total);
            if (lineDelayData.length !== 0) {
              lineDelayChart();
            } else {
              $(".lineDelayChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".lineDelayChart").html("<div class='noData'>今日暂无数据</div>");
          }
        } else {
          $(".lineDelayChart").html("<div class='noData'>今日暂无数据</div>");
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 线路清客次数;
  // $.ajax({
  //   type: "get",
  //   async: true, //异步执行
  //   url: base_url + "/lnClerCustNr",
  //   dataType: "json", //返回数据形式为json
  //   success: function (data) {
  //     if (data.code == 1000) {
  //       if (data.data !== null) {
  //         passengerClearanceTimesData = data.data.dataList;
  //         if (Object.keys(data.data).length !== 0) {
  //           $(".passengerClearanceTimes_total").text(data.data.total);
  //           if (passengerClearanceTimesData.length !== 0) {
  //             passengerClearanceTimesData = convertKey(
  //               passengerClearanceTimesData,
  //               ["name", "value"]
  //             );
  //             passengerClearanceTimeslnNm = passengerClearanceTimesData.map(
  //               (v) => v.name
  //             );
  //             passengerClearanceTimesChart();
  //           } else {
  //             $(".passengerClearanceTimesChart").html(
  //               "<div class='noData'>今日暂无数据</div>"
  //             );
  //           }
  //         } else {
  //           $(".passengerClearanceTimesChart").html(
  //             "<div class='noData'>今日暂无数据</div>"
  //           );
  //         }
  //       } else {
  //         $(".passengerClearanceTimesChart").html(
  //           "<div class='noData'>今日暂无数据</div>"
  //         );
  //       }
  //     } else {
  //       alert(data.message);
  //     }
  //     fn();
  //   },
  //   error: function (errorMsg) {
  //     console.log("请求数据失败");
  //   },
  // });
  // 运营规模;
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/optgDyNrAndOptgLnNrAndTrnsfrStatnTotl",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          operationScaleData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".operationScale_average").text(data.data.num);
            if (operationScaleData.length !== 0) {
              operationScaleChart();
            } else {
              $(".operationScaleChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".operationScaleChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".operationScaleChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 线路运营长度
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/lnOptgLgt",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          lineOperationLengthData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".lineOperationLength_totalLength").text(data.data.total);
            if (lineOperationLengthData.length !== 0) {
              lineOperationLengthlnNm = lineOperationLengthData.map(
                (v) => v.lnNm
              );
              lineOperationLengthlnOptgLgt = lineOperationLengthData.map(
                (v) => v.lnOptgLgt
              );
              lineOperationLengthChart();
            } else {
              $(".lineOperationLengthChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".lineOperationLengthChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".lineOperationLengthChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 网络最高日客运量
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/ntHistDlyPasgrNr",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          networkMaxdailyPasData = data.data;
          if (Object.keys(data.data).length !== 0) {
            $(".networkMaxdailyPas_max").text(data.data.max);
            if (networkMaxdailyPasData.length !== 0) {
              networkMaxdailyPasChart();
            } else {
              $(".networkMaxdailyPasChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".networkMaxdailyPasChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".networkMaxdailyPasChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //网络日均出行量
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/ntDlyOutNr",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          networkDailyTravelNumData = data.data;
          if (Object.keys(data.data).length !== 0) {
            $(".networkDailyTravelNum_max").text(data.data.max);
            if (networkDailyTravelNumData.length !== 0) {
              networkDailyTravelNumChart();
            } else {
              $(".networkDailyTravelNumChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".networkDailyTravelNumChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".networkDailyTravelNumChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //网络出行量比重
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/ntOutPptn",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          networkTravelVolumeData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".networkTravelVolume_avg").text(data.data.avg);
            if (networkTravelVolumeData.length !== 0) {
              networkTravelVolumeChart();
            } else {
              $(".networkTravelVolumeChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".networkTravelVolumeChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".networkTravelVolumeChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //车站最高日客运量（万乘次/日）
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/statnHistPasgrNr",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          stationHighestData = data.data;
          if (Object.keys(data.data).length !== 0) {
            $(".stationHighest_max").text(data.data.avg);
            if (stationHighestData.length !== 0) {
              stationHighestChart();
            } else {
              $(".stationHighestChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".stationHighestChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".stationHighestChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //建设规模
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/scaleOfConstruction",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          modelingScaleData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".modelingScale_total").text(data.data.total);
            if (modelingScaleData.length !== 0) {
              modelingScaleData = convertKey(modelingScaleData, [
                "name",
                "value",
              ]);
              modelingScaleChart();
            } else {
              $(".modelingScaleChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".modelingScaleChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".modelingScaleChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  //前期工作完成率
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/preparationCompletePercent",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          preliminaryWorkData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".preliminaryWork_avg").text(data.data.avg);
            if (preliminaryWorkData.length !== 0) {
              preliminaryWorkindxNmDtl = preliminaryWorkData.map(
                (v) => v.indxNmDtl
              );
              preliminaryWorkindxVl1 = preliminaryWorkData.map(
                (v) => v.indxVl1
              );
              preliminaryWorkindxVl2 = preliminaryWorkData.map(
                (v) => v.indxVl2
              );
              preliminaryWorkChart();
            } else {
              $(".preliminaryWorkChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".preliminaryWorkChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".preliminaryWorkChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
  // 机电系统工程合格率;
  $.ajax({
    type: "get",
    async: true, //异步执行
    url: base_url + "/systemItemEffectivePercent",
    dataType: "json", //返回数据形式为json
    success: function (data) {
      if (data.code == 1000) {
        if (data.data !== null) {
          electromechanicalSystemData = data.data.dataList;
          if (Object.keys(data.data).length !== 0) {
            $(".electromechanicalSystem_min").text(data.data.min);
            if (electromechanicalSystemData.length !== 0) {
              electromechanicalSystemChart();
            } else {
              $(".electromechanicalSystemChart").html(
                "<div class='noData'>今日暂无数据</div>"
              );
            }
          } else {
            $(".electromechanicalSystemChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".electromechanicalSystemChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        alert(data.message);
      }
      fn();
    },
    error: function (errorMsg) {
      console.log("请求数据失败");
    },
  });
}
indexFour(function () {});
//票卡分类统计
function ticketCardSChart() {
  let lineStationNumC = document.getElementsByClassName("ticketCardSChart");
  for (var i = 0; i < lineStationNumC.length; i++) {
    let myChart = echarts.init(lineStationNumC[i]);
    const data = [
      {
        name: "单程票",
        value: ticketCardSData.sjtPer,
      },
      {
        name: "传统交通卡",
        value: ticketCardSData.sptcPer,
      },
      {
        name: "手机交通卡",
        value: ticketCardSData.phSptcPer,
      },
      {
        name: "二维码",
        value: ticketCardSData.qrcdPer,
      },
      {
        name: "其他",
        value: ticketCardSData.otherPer,
      },
    ];
    let formatNumber = function (num) {
      let reg = /(?=(\B)(\d{3})+$)/g;
      return num;
    };
    var data1 = [
      ticketCardSData.sjtTms,
      ticketCardSData.sptcTms,
      ticketCardSData.phSptcTms,
      ticketCardSData.qrcdTms,
      ticketCardSData.otherTms,
    ];
    var colorList = ["#503EFF", "#3E82FF", "#8BF39A", "#00FCFD", "#8BF39A"];
    var rich = {
      name: {
        color: "#FFF",
        fontSize: 12,
        padding: [10, 0, 0, 10],
        fontWeight: "400",
        align: "left",
      },
      value: {
        color: "#FFF",
        fontSize: 12,
        padding: [10, 10, 0, 0],
        fontWeight: "500",
        align: "right",
      },
      percent: {
        color: "#FFF",
        align: "right",
        fontSize: 12,
        fontWeight: "500",
        //padding: [0, 5]
      },
      hr: {
        width: "100%",
        height: 0,
      },
      cir: {
        fontSize: 26,
      },
    };
    //职称结构图表

    option = {
      legend: {
        // selectedMode: false, // 取消图例上的点击事件
        type: "plain",
        icon: "circle",
        orient: "horizontal",
        bottom: 0,
        left: "45%",
        // top: "10%",
        align: "left",
        symbolKeepAspect: false,
        textStyle: {
          color: "#fff",
          rich: {
            name: {
              verticalAlign: "right",
              align: "left",
              fontSize: 12,
            },
            value: {
              align: "left",
              fontSize: 12,
            },
          },
        },
        data: data.map((item) => item.name),
        formatter: function (name) {
          if (data && data.length) {
            for (var i = 0; i < data.length; i++) {
              if (name === data[i].name) {
                return "{name| " + name + "}";
              }
            }
          }
        },
      },
      color: ["#503EFF", "#3E82FF", "#8BF39A", "#00FCFD", "#8BF39A"],
      grid: [{ top: "15%", left: "15%", bottom: "25%", width: "30%" }],
      xAxis: {
        gridIndex: 0,
        type: "category",
        axisLabel: {
          color: "#fff",
          interval: 0,
          rotate: 45,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        data: ["单程票", "传统交通卡", "手机交通卡", "二维码", "其他"],
      },
      yAxis: {
        type: "value",
        name: "万次/月",
        nameTextStyle: {
          color: "#fff",
        },
        axisLabel: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        gridIndex: 0,
      },
      series: [
        {
          type: "bar",
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00b0ff",
                  },
                  {
                    offset: 0.8,
                    color: "#7052f4",
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          // data: [1180.47, 5476.49, 2988.22, 6168.69, 128.8],
          data: data1,
        },
        {
          name: "数量",
          type: "pie",
          radius: ["15%", "25%"],
          center: ["70%", "40%"],
          data: data,
          label: {
            show: true,
            position: "outside",
            formatter: (params) => {
              return "{value|" + formatNumber(params.value) + "%}";
            },
            rich: {
              text: {
                align: "center",
                verticalAlign: "middle",
                padding: 8,
                fontSize: 30,
              },
              value: {
                align: "center",
                verticalAlign: "middle",
                fontSize: 10,
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "12",
              },
            },
          },
          labelLine: {
            normal: {
              show: true,
              length: 5,
            },
          },
        },
        // {
        //   itemStyle: {
        //     normal: {
        //       borderColor: "#0A1934",
        //       borderWidth: 5,
        //       color: function (params) {
        //         return colorList[params.dataIndex];
        //       },
        //     },
        //   },
        //   type: "pie",
        //   radius: ["10%", "15%"],
        //   center: ["75%", "50%"],
        //   label: {
        //     normal: {
        //       show: false,
        //       position: "inner",
        //       formatter: (params) => {
        //         return "{percent|" + params.percent.toFixed(0) + "%}";
        //       },
        //       rich: rich,
        //     },
        //   },
        //   data: syjgdata,
        // },
        // {
        //   itemStyle: {
        //     normal: {
        //       borderColor: "#0A1934",
        //       borderWidth: 5,
        //       color: function (params) {
        //         return colorList[params.dataIndex];
        //       },
        //     },
        //   },
        //   type: "pie",
        //   silent: true, //取消高亮
        //   radius: ["30%", "50%"],
        //   center: ["75%", "50%"],
        //   labelLine: {
        //     normal: {
        //       length: 10,
        //       length2: 0,
        //       lineStyle: {
        //         color: "transparent",
        //       },
        //     },
        //   },
        //   label: {
        //     normal: {
        //       formatter: (params) => {
        //         return (
        //           "{name|" +
        //           params.name +
        //           "}\n{value|" +
        //           params.value +
        //           "%}\n{hr|—————}"
        //         );
        //       },
        //       rich: rich,
        //       padding: [-25, 15, 0, 15],
        //     },
        //   },
        //   data: syjgdata,
        //   z: -1,
        // },
        // {
        //   itemStyle: {
        //     normal: {
        //       borderColor: "#0A1934",
        //       borderWidth: 5,
        //       color: function (params) {
        //         return colorList[params.dataIndex];
        //       },
        //     },
        //   },
        //   type: "pie",
        //   silent: true, //取消高亮
        //   radius: ["30%", "50%"],
        //   center: ["75%", "50%"],
        //   labelLine: {
        //     normal: {
        //       length: 10,
        //       length2: 0,
        //       lineStyle: {
        //         color: "transparent",
        //       },
        //     },
        //   },
        //   label: {
        //     normal: {
        //       formatter: (params) => {
        //         return "\n{cir|●}\n";
        //       },
        //       rich: rich,
        //     },
        //   },
        //   data: syjgdata,
        //   z: -1,
        // },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
}

//线路延误事件数
function lineDelayChart() {
  let linePassengerVC = document.getElementsByClassName("lineDelayChart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var myRate1 = 50;
    option = {
      backgroundColor: "#031845",
      title: [
        {
          x: "0%",
          bottom: "20%",
          text: "5min~15min",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff",
          },
        },
        {
          x: "39%",
          bottom: "20%",
          text: "15min~30min",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff",
          },
        },
        {
          x: "76%",
          bottom: "20%",
          text: "30min以上",
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
            color: "#fff",
          },
        },
      ],
      tooltip: {
        show: true,
      },
      series: [
        {
          type: "gauge",
          center: ["50%", "55%"], // 默认全局居中
          radius: "22%",
          splitNumber: 6, //刻度数量
          min: 0,
          max: 30,
          startAngle: 200,
          endAngle: -20,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              shadowBlur: 0,
              color: [[1, "#03B7C9"]],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#03B7C9",
              width: 1,
            },
            length: -10,
            splitNumber: 6,
          },
          splitLine: {
            show: true,
            length: -15,
            lineStyle: {
              color: "#03B7C9",
            },
          },
          axisLabel: {
            distance: -15,
            textStyle: {
              color: "#03B7C9",
              fontSize: "10",
              fontWeight: "bold",
            },
          },
          pointer: {
            //仪表盘指针
            show: 0,
          },
          detail: {
            show: false,
          },
          data: [
            {
              name: "",
              value: myRate1,
            },
          ],
        },
        {
          startAngle: 200,
          endAngle: -20,
          type: "gauge",
          center: ["50%", "55%"], // 默认全局居中
          radius: "20%",
          min: 0,
          max: 30,
          splitNumber: 0,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              color: [
                [0.66, "#dddddd"],
                [1, "#dddddd"],
              ], // 属性lineStyle控制线条样式
              width: 4,
            },
          },

          axisLabel: {
            // 坐标轴小标记
            textStyle: {
              // 属性lineStyle控制线条样式
              fontWeight: "bolder",
              fontSize: 12,
              color: "rgba(30,144,255,0)",
            },
          },
          splitLine: {
            // 分隔线
            length: 10, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              width: 0,
              color: "#444",
            },
          },
          pointer: {
            // 分隔线 指针
            color: "#666666",
            width: 0,
            length: 230,
          },
          detail: {
            show: false,
          },
        },
        {
          name: "15min(含)30min",
          type: "gauge",
          startAngle: 200,
          endAngle: -20,
          radius: "40%",
          center: ["50%", "55%"], // 默认全局居中
          min: 0,
          max: 30,
          axisLine: {
            show: false,
            lineStyle: {
              width: 25,
              shadowBlur: 0,
              color: [
                [0.2, "#00FAFC"],
                [0.4, "#3BD542"],
                [0.6, "#E3F424"],
                [0.8, "#7E48DA"],
                [1, "#E531A8"],
              ],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: 15,
          },

          axisLabel: {
            show: false,
          },
          pointer: {
            show: true,
            width: 5,
          },
          detail: {
            show: true,
            offsetCenter: [0, "50%"],
            textStyle: {
              fontSize: 20,
            },
          },
          itemStyle: {
            normal: {
              color: "#03B7C9",
            },
          },
          data: [
            {
              value: lineDelayData.lnDlyNr2,
            },
          ],
        },
        {
          type: "gauge",
          center: ["22%", "55%"], // 默认全局居中
          radius: "20%",
          splitNumber: 6, //刻度数量
          min: 0,
          max: 30,
          endAngle: 45,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              shadowBlur: 0,
              color: [[1, "#03B7C9"]],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#03B7C9",
              width: 1,
            },
            length: -10,
            splitNumber: 6,
          },
          splitLine: {
            show: true,
            length: -15,
            lineStyle: {
              color: "#03B7C9",
            },
          },
          axisLabel: {
            distance: -20,
            textStyle: {
              color: "#03B7C9",
              fontSize: "10",
              fontWeight: "bold",
            },
          },
          pointer: {
            //仪表盘指针
            show: 0,
          },
          detail: {
            show: false,
          },
          data: [
            {
              name: "",
              value: myRate1,
            },
          ],
        },
        {
          type: "gauge",
          center: ["22%", "55%"], // 默认全局居中
          radius: "20%",
          min: 0,
          max: 30,
          endAngle: 45,
          splitNumber: 0,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              color: [
                [0.66, "#dddddd"],
                [1, "#dddddd"],
              ], // 属性lineStyle控制线条样式
              width: 4,
            },
          },

          axisLabel: {
            // 坐标轴小标记
            textStyle: {
              // 属性lineStyle控制线条样式
              fontWeight: "bolder",
              fontSize: 20,
              color: "rgba(30,144,255,0)",
            },
          },
          splitLine: {
            // 分隔线
            length: 10, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              width: 0,
              color: "#444",
            },
          },
          pointer: {
            // 分隔线 指针
            color: "#666666",
            width: 0,
            length: 230,
          },
          detail: {
            show: false,
          },
        },
        {
          name: "5min(含)15min",
          type: "gauge",
          endAngle: 45,
          radius: "25%",
          center: ["22%", "55%"], // 默认全局居中
          min: 0,
          max: 30,

          axisLine: {
            show: false,
            lineStyle: {
              width: 25,
              shadowBlur: 0,
              color: [
                [0.2, "#00FAFC"],
                [0.4, "#3BD542"],
                [0.6, "#E3F424"],
                [0.8, "#7E48DA"],
                [1, "#E531A8"],
              ],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: 20,
          },

          axisLabel: {
            show: false,
          },
          pointer: {
            show: true,
            width: 5,
          },
          detail: {
            show: true,
            offsetCenter: [0, "75%"],
            textStyle: {
              fontSize: 20,
            },
          },
          itemStyle: {
            normal: {
              color: "#03B7C9",
            },
          },
          data: [
            {
              value: lineDelayData.lnDlyNr1,
            },
          ],
        },
        {
          type: "gauge",
          center: ["80%", "55%"], // 默认全局居中
          radius: "20%",
          splitNumber: 6, //刻度数量
          min: 0,
          max: 30,
          startAngle: 140,
          endAngle: -45,
          clockwise: true,
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              shadowBlur: 0,
              color: [[1, "#03B7C9"]],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#03B7C9",
              width: 1,
            },
            length: -10,
            splitNumber: 5,
          },
          splitLine: {
            show: true,
            length: -15,
            lineStyle: {
              color: "#03B7C9",
            },
          },
          axisLabel: {
            distance: -15,
            textStyle: {
              color: "#03B7C9",
              fontSize: "10",
              fontWeight: "bold",
            },
          },
          pointer: {
            //仪表盘指针
            show: 0,
          },
          detail: {
            show: false,
          },
          data: [
            {
              name: "",
              value: myRate1,
            },
          ],
        },
        {
          type: "gauge",
          center: ["80%", "55%"], // 默认全局居中
          radius: "20%",
          min: 0,
          max: 30,
          startAngle: 140,
          endAngle: -45,
          splitNumber: 0,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              color: [
                [0.66, "#dddddd"],
                [1, "#dddddd"],
              ], // 属性lineStyle控制线条样式
              width: 4,
            },
          },

          axisLabel: {
            // 坐标轴小标记
            textStyle: {
              // 属性lineStyle控制线条样式
              fontWeight: "bolder",
              fontSize: 10,
              color: "rgba(30,144,255,0)",
            },
          },
          splitLine: {
            // 分隔线
            length: 10, // 属性length控制线长
            lineStyle: {
              // 属性lineStyle（详见lineStyle）控制线条样式
              width: 0,
              color: "#444",
            },
          },
          pointer: {
            // 分隔线 指针
            color: "#666666",
            width: 0,
            length: 230,
          },
          detail: {
            show: false,
          },
        },
        {
          name: "30min以上",
          type: "gauge",
          startAngle: 140,
          endAngle: -45,
          radius: "25%",
          center: ["80%", "55%"], // 默认全局居中

          min: 0,
          max: 30,

          axisLine: {
            show: false,
            lineStyle: {
              width: 25,
              shadowBlur: 0,
              color: [
                [0.2, "#00FAFC"],
                [0.4, "#3BD542"],
                [0.6, "#E3F424"],
                [0.8, "#7E48DA"],
                [1, "#E531A8"],
              ],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: 5,
          },

          axisLabel: {
            show: false,
          },
          pointer: {
            show: true,
            width: 5,
          },
          detail: {
            show: true,
            offsetCenter: [0, "75%"],
            textStyle: {
              fontSize: 16,
            },
          },
          itemStyle: {
            normal: {
              color: "#03B7C9",
            },
          },
          data: [
            {
              value: lineDelayData.lnDlyNr3,
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}



// 线路运营长度
function lineOperationLengthChart() {
  let averageDailyPassNumC = document.getElementsByClassName(
    "lineOperationLengthChart"
  );
  for (var i = 0; i < averageDailyPassNumC.length; i++) {
    let myChart = echarts.init(averageDailyPassNumC[i]);
    option = {
      grid: {
        borderWidth: 0,
        top: "6%",
        bottom: "15%",
        right: "4%",
      },
      xAxis: {
        data: lineOperationLengthlnNm,
        axisLine: {
          lineStyle: {
            color: "#3d5269",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 10,
          interval: 0,
          rotate: 45,
        },
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: "#3d5269",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 10,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#2d3d53",
          },
        },
        interval: 10,
      },
      series: [
        {
          type: "bar",
          barMaxWidth: 35,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#5ef3ff",
                  },
                  {
                    offset: 1,
                    color: "#06a4f4",
                  },
                ],
                false
              ),
            },
          },
          label: {
            normal: {
              show: false,
              fontSize: 10,
              fontWeight: "bold",
              color: "#ffffff",
              position: "top",
            },
          },
          data: lineOperationLengthlnOptgLgt,
        },
      ],
    };
    myChart.setOption(option);
  }
}
//网络最高日客运量
function networkMaxdailyPasChart() {
  let years = [];
  networkMaxdailyPasData.yearList.forEach((item, index) => {
    years.push(item + "年");
  });
  let averageDailyOperaC = document.getElementsByClassName(
    "networkMaxdailyPasChart"
  );
  for (var i = 0; i < averageDailyOperaC.length; i++) {
    let myChart = echarts.init(averageDailyOperaC[i]);
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "2%",
        right: "4%",
        bottom: "1%",
        top: "16%",
        containLabel: true,
      },
      legend: {
        data: years,
        right: 10,
        top: 12,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        type: "category",
        data: ["第一季度", "第二季度", "第三季度", "第四季度"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        max: "1500",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        axisLabel: {},
      },
      series: [
        {
          name: years[0],
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fccb05",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              barBorderRadius: 12,
            },
          },
          data: networkMaxdailyPasData.theYearBeforeLast,
        },
        {
          name: years[1],
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#8bd46e",
                },
                {
                  offset: 1,
                  color: "#09bcb7",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: networkMaxdailyPasData.lastYear,
        },
        {
          name: years[2],
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#248ff7",
                },
                {
                  offset: 1,
                  color: "#6851f1",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: networkMaxdailyPasData.currentYear,
        },
      ],
    };
    myChart.setOption(option);
  }
}

//网络日均出行量
function networkDailyTravelNumChart() {
  let lineVehiclesNumC = document.getElementsByClassName(
    "networkDailyTravelNumChart"
  );
  for (var i = 0; i < lineVehiclesNumC.length; i++) {
    let myChart = echarts.init(lineVehiclesNumC[i]);
    let xAxisData = ["第一季度", "第二季度", "第三季度", "第四季度"];
    let yAxisData1 = networkDailyTravelNumData.theYearBeforeLast;
    let yAxisData2 = networkDailyTravelNumData.lastYear;

    let color = ["#8B5CFF", "#00CA69"];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };

    option = {
      color: color,
      legend: {
        top: "1%",
        textStyle: {
          color: "#fff",
        },
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          let html = "";
          params.forEach((v) => {
            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                    color[v.componentIndex]
                  };"></span>
                  ${v.seriesName}2020.${v.name}  
                  <span style="color:${
                    color[v.componentIndex]
                  };font-weight:700;font-size: 18px;margin-left:5px">${
              v.value
            }</span>
                  万元`;
          });
          return html;
        },
        extraCssText:
          "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
        axisPointer: {
          type: "shadow",
          shadowStyle: {
            color: "#ffffff",
            shadowColor: "rgba(225,225,225,1)",
            shadowBlur: 5,
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: "20%",
        bottom: "10%",
        right: "8%",
        left: "16%",
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          data: xAxisData,
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "单位（万人次/日）",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 10,
            lineHeight: 20,
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: networkDailyTravelNumData.yMin,
          max: networkDailyTravelNumData.yMax,
        },
      ],
      series: [
        {
          // name: "2018",
          name: networkDailyTravelNumData.yearList[0] + "年",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[0],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[0], 0.5),
              shadowOffsetY: 8,
            },
          },
          symbol: "circle", //数据交叉点样式
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[0], 0.3),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[0], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[0], 0.1),
              shadowBlur: 10,
            },
          },
          data: yAxisData1,
        },
        {
          name: networkDailyTravelNumData.yearList[1] + "年",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1],
              shadowBlur: 3,
              shadowColor: hexToRgba(color[1], 0.5),
              shadowOffsetY: 8,
            },
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(color[1], 0.3),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(color[1], 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(color[1], 0.1),
              shadowBlur: 10,
            },
          },
          data: yAxisData2,
        },
      ],
    };
    myChart.setOption(option);
  }
}

//网络出行量比重
function networkTravelVolumeChart() {
  let additionalTrainsC = document.getElementsByClassName(
    "networkTravelVolumeChart"
  );
  for (var i = 0; i < additionalTrainsC.length; i++) {
    let myChart = echarts.init(additionalTrainsC[i]);
    var demoData = [
      {
        name: networkTravelVolumeData[0].sctn + "年\n网络出行量比重",
        unit: "%",
        value: networkTravelVolumeData[0].ntOutPptn,
      },
      {
        name: networkTravelVolumeData[1].sctn + "年\n网络出行量比重",
        unit: "%",
        value: networkTravelVolumeData[1].ntOutPptn,
      },
      {
        name: networkTravelVolumeData[2].sctn + "年\n网络出行量比重",
        unit: "%",
        value: networkTravelVolumeData[2].ntOutPptn,
      },
    ];
    option = {
      series: (function () {
        var result = [];

        demoData.forEach(function (item, index) {
          result.push(
            {
              name: item.name + "年\n网络出行量比重",
              radius: "40%",
              type: "gauge",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 10,
                  shadowBlur: 0,
                  color: [
                    [0, "transparent"],
                    [0.1, "#194383"],
                    [0.108, "transparent"],
                    [0.2, "#194383"],
                    [0.208, "transparent"],
                    [0.3, "#194383"],
                    [0.308, "transparent"],
                    [0.4, "#194383"],
                    [0.408, "transparent"],
                    [0.5, "#194383"],
                    [0.508, "transparent"],
                    [0.6, "#194383"],
                    [0.608, "transparent"],
                    [0.7, "#194383"],
                    [0.708, "transparent"],
                    [0.8, "#194383"],
                    [0.808, "transparent"],
                    [0.9, "#194383"],
                    [0.908, "transparent"],
                    [1, "#194383"],
                  ],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: false,
              },
              detail: {
                show: false,
              },
              data: [
                {
                  show: false,
                },
              ],
            },
            {
              name: item.name,
              type: "gauge",
              radius: "45%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 150,
                  color: [
                    [
                      item.value / 100,
                      new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "rgba(69, 161, 255,0)",
                        },
                        {
                          offset: 0.3,
                          color: "rgba(69, 161, 255,0)",
                        },
                        {
                          offset: 1,
                          color: "rgba(69, 161, 255,0.7)",
                        },
                      ]),
                    ],
                    [1, "rgba(28,128,245,.0)"],
                  ],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: false,
                length: "100%",
              },
              detail: {
                show: true,
                offsetCenter: [1, "1%"],
                textStyle: {
                  fontSize: 20,
                  color: "#0AFCE0",
                },
                formatter: ["{value}" + ("%" || "")].join("\n"),
              },
              itemStyle: {
                color: "rgba(28, 128, 245,.3)",
                borderColor: "rgba(28, 128, 245,1)",
              },
              data: [
                {
                  value: item.value,
                },
              ],
            },
            {
              type: "gauge",
              radius: "35%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              splitNumber: 8,
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 0,
                  color: [
                    [
                      1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 1,
                          color: "#194383",
                        },
                        {
                          offset: 1,
                          color: "#194383",
                        },
                      ]),
                    ],
                  ],
                },
              },

              splitLine: {
                show: true,
                length: 10,
                color: "#90D1FE",
              },
              pointer: {
                show: 0,
              },
              detail: {
                show: 0,
              },
            },
            {
              type: "gauge",
              radius: "40%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              // center: [
              //   index < 2 ? index * 39 + 20 + "%" : index * 45 - 40 + "%",
              //   index < 2 ? "30%" : "75%",
              // ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
                textStyle: {
                  fontSize: 12,
                },
              },
              axisLine: {
                show: false,
              },

              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: true,
                offsetCenter: [0, "50%"],
                formatter: item.name,
                textStyle: {
                  fontSize: 12,
                  color: "#ffffff",
                  lineHeight: 20,
                  fontWeight: "100",
                },
              },
            },
            {
              type: "gauge",
              radius: "45%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [0.05, "#3F6BFC"],
                    [0.1, "#4072FB"],
                    [0.15, "#4077F9"],
                    [0.2, "#417BF9"],
                    [0.25, "#4282F8"],
                    [0.3, "#4385F7"],
                    [0.35, "#4389F6"],
                    [0.4, "#448FF5"],
                    [0.45, "#4594F4"],
                    [0.5, "#4599F3"],
                    [0.55, "#469EF2"],
                    [0.6, "#46A3F1"],
                    [0.65, "#46A6F0"],
                    [0.7, "#24befe"],
                    [0.75, "#12d1ff"],
                    [0.8, "#06defe"],
                    [0.85, "#05e0ff"],
                    [0.9, "#06deff"],
                    [0.95, "#06deff"],
                    [1, "#06deff"],
                  ],
                },
              },
              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: false,
              },
            },
            {
              type: "gauge",
              radius: "50%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 45 - 40 + "%",
                index < 2 ? "30%" : "75%",
              ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [0.05, "#0A498E"],
                    [0.1, "#0C58A7"],
                    [0.15, "#254DD3"],
                    [0.2, "#355FEC"],
                    [0.25, "#4072FB"],
                    [0.3, "#355FEC"],
                    [0.35, "#254DD3"],
                    [0.4, "#06478B"],
                    [0.45, "#0A246C"],
                    [0.5, "#071848"],
                    [0.55, "#071848"],
                    [0.6, "#0A246C"],
                    [0.65, "#06478B"],
                    [0.7, "#254DD3"],
                    [0.75, "#355FEC"],
                    [0.8, "#355FEC"],
                    [0.85, "#254DD3"],
                    [0.9, "#0C58A7"],
                    [0.95, "#0A498E"],
                    [1, "#0A498E"],
                  ],
                },
              },
              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: false,
              },
            }
          );
        });

        return result;
      })(),
    };
    myChart.setOption(option);
  }
}

//车站最高日客运量
function stationHighestChart() {
  // 基于准备好的dom，初始化echarts实例
  let totalMileageC = document.getElementsByClassName("stationHighestChart");
  for (var i = 0; i < totalMileageC.length; i++) {
    let myChart = echarts.init(totalMileageC[i]);
    option = {
      tooltip: {},
      grid: {
        top: "20%",
        left: "5%",
        right: "1%",
        bottom: "0%",
        containLabel: true,
      },
      // legend: {
      //   itemGap: 50,
      //   data: ["注册总量", "最新注册量"],
      //   textStyle: {
      //     color: "#f9f9f9",
      //     borderColor: "#fff",
      //   },
      // },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
            },
            interval: 0,
            rotate: 45,
          },
          axisTick: {
            show: false,
          },
          data: stationHighestData.quartersList,
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "注册总量",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#28ffb3", // 线条颜色
            },
            borderColor: "#f0f",
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,154,120,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          data: stationHighestData.dataList,
        },
        {
          name: "最新注册量",
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: false,
          },
          label: {
            show: false,
            position: "1",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          itemStyle: {
            normal: {
              // barBorderRadius: 5,
              // color: new echarts.graphic.LinearGradient(
              //     0, 0, 0, 1,
              //     [{
              //             offset: 0,
              //             color: '#14c8d4'
              //         },
              //         {
              //             offset: 1,
              //             color: '#43eec6'
              //         }
              //     ]
              // )
              color: "#1dfff1",
              // function(params) {
              //     var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1', '#1dfff1'];
              //     return colorList[params.dataIndex];
              // }
            },
          },
          data: stationHighestData.dataList,
        },
      ],
    };
    myChart.setOption(option);
  }
}
//建设规模
function modelingScaleChart() {
  let trainNumberC = document.getElementsByClassName("modelingScaleChart");
  for (var i = 0; i < trainNumberC.length; i++) {
    let myChart = echarts.init(trainNumberC[i]);
    var colorList = [
      "#73DDFF",
      "#73ACFF",
      "#FDD56A",
      "#FDB36A",
      "#FD866A",
      "#9E87FF",
      "#58D5FF",
    ];
    let title = "建设总里程";
    let formatNumber = function (num) {
      let reg = /(?=(\B)(\d{3})+$)/g;
      return num;
    };
    let total = modelingScaleData.reduce((a, b) => {
      return a + b.value * 1;
      debugger;
    }, 0);
    option = {
      title: {
        text: "{name|" + title + "}\n{val|" + formatNumber(total) + "km" + "}",
        x: "center",
        y: "center",
        textStyle: {
          color: "#fff",
          rich: {
            name: {
              fontSize: 12,
              color: "#fff",
            },
            val: {
              fontSize: 12,
              color: "#fff",
            },
          },
        },
      },
      tooltip: {
        trigger: "item",
        borderColor: "rgba(255,255,255,.3)",
        backgroundColor: "rgba(13,5,30,.6)",
        borderWidth: 1,
        padding: 5,
        formatter: function (parms) {
          var str =
            parms.marker +
            "" +
            parms.data.name +
            "</br>" +
            "数量：" +
            parms.data.value +
            "头</br>" +
            "占比：" +
            parms.percent +
            "%";
          return str;
        },
      },
      series: [
        {
          type: "pie",
          z: 3,
          center: ["50%", "50%"],
          radius: ["30%", "45%"],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
          label: {
            show: true,
            fontSize: 10,
            position: "outside",
            formatter: (params) => {
              return (
                "{name|" +
                params.name +
                "}{value|" +
                formatNumber(params.value) +
                "km" +
                "}"
              );
            },
            rich: {
              hr: {
                backgroundColor: "t",
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12],
              },
              a: {
                padding: [-30, 15, -20, 15],
              },
            },
          },
          labelLine: {
            normal: {
              length: 5,
              length2: 5,
              lineStyle: {
                width: 1,
              },
            },
          },
          data: modelingScaleData,
        },
        {
          stack: "a",
          name: "第一层环",
          type: "pie",
          z: 2,
          tooltip: {
            show: false,
          },
          center: ["50%", "50%"],
          radius: ["45%", "58%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "rgba(1,15,80,.4)",
            },
            emphasis: {
              color: "rgba(1,15,80,.4)",
            },
          },
          data: [100],
        },
        {
          name: "第二层环",
          type: "pie",
          z: 1,
          tooltip: {
            show: false,
          },
          center: ["50%", "50%"],
          radius: ["58%", "76%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "rgba(0,15,69,.2)",
            },
            emphasis: {
              color: "rgba(0,15,69,.2)",
            },
          },
          label: {
            show: true,
          },
          data: [100],
        },
      ],
    };
    myChart.setOption(option);
  }
}

//前期工作完成率
function preliminaryWorkChart() {
  let numLineVehiclesC = document.getElementsByClassName(
    "preliminaryWorkChart"
  );
  for (var i = 0; i < numLineVehiclesC.length; i++) {
    let myChart = echarts.init(numLineVehiclesC[i]);
    option = {
      legend: {
        data: ["实际完成率", "计划完成率"],
        right: 10,
        top: 12,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0, 255, 233,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 255, 255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 233,0)",
                },
              ],
              global: false,
            },
          },
        },
      },
      grid: {
        top: "20%",
        left: "10%",
        right: "10%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
          },
          splitArea: {
            // show: true,
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          axisLabel: {
            color: "#fff",
            // rotate: 45,
            interval: 0,
            fontSize: 10,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: preliminaryWorkindxNmDtl,
        },
      ],

      yAxis: [
        {
          type: "value",
          scale: true,
          // min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "实际完成率",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "#00b3f4",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            formatter: "{c}%",
            position: "top",
            textStyle: {
              color: "#00b3f4",
            },
          },
          itemStyle: {
            color: "#00b3f4",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,179,244,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,179,244,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,179,244, 0.9)",
              shadowBlur: 20,
            },
          },
          data: preliminaryWorkindxVl2,
        },
        {
          name: "计划完成率",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "#00ca95",
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5,
            },
          },
          label: {
            show: true,
            formatter: "{c}%",
            position: "top",
            textStyle: {
              color: "#00ca95",
            },
          },

          itemStyle: {
            color: "#00ca95",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: "rgba(0, 0, 0, .3)",
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          tooltip: {
            show: false,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,202,149,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,202,149,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,202,149, 0.9)",
              shadowBlur: 20,
            },
          },
          data: preliminaryWorkindxVl1,
        },
      ],
    };
    myChart.setOption(option);
  }
}
//机电系统工程合格率
// electromechanicalSystemChart();
function electromechanicalSystemChart() {
  let onTimeTrainC = document.getElementsByClassName(
    "electromechanicalSystemChart"
  );
  for (var i = 0; i < onTimeTrainC.length; i++) {
    let myChart = echarts.init(onTimeTrainC[i]);
    var titleArr = [],
      seriesArr = [];
    colors = [
      ["#57bbf7", "#f4f4f7"],
      ["#ffc969", "#f4f4f7"],
      ["#f38b97", "#f4f4f7"],
      ["#b1d882", "#f4f4f7"],
      ["#c0acf9", "#f4f4f7"],
    ];
    electromechanicalSystemData.forEach(function (item, index) {
      titleArr.push({
        text: "验收合格率:" + item.indxVl3,
        left: index < 2 ? index * 50 + 24 + "%" : index * 50 - 77 + "%",
        top: index < 2 ? "17%" : "64%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          fontSize: 10,
          rich: {
            a: {
              fontSize: 10,
              color: "#29EEF3",
            },
            b: {
              fontSize: 12,
              color: "#29EEF3",
              padding: [0, 0, 14, 0],
            },
            c: {
              fontSize: 10,
              color: "#ffffff",
              padding: [5, 0],
            },
            num: {
              fontSize: 10,
              color: "#ffffff",
              padding: [5, 0],
            },
          },
        },
      });
      seriesArr.push(
        {
          type: "gauge",
          radius: "40%",
          name: item.name,
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "72%",
          ],
          clockwise: false,
          startAngle: "75",
          endAngle: "-269.9999",
          splitNumber: 22,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [
                  52 / 100,
                  new echarts.graphic.RadialGradient(
                    1,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#ffc500",
                      },
                      {
                        offset: 0.5,
                        color: "#ffe53a",
                      },
                      {
                        offset: 1,
                        color: "#feef4c",
                      },
                    ],
                    false
                  ),
                ],
                [1, "rgba(32,187,252,0.15)"],
              ],
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "#071427",
              width: 2,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: true,
            offsetCenter: [0, "120%"],
            color: "#fff",
            formatter: function (params) {
              return item.indxNmDtl;
            },
            textStyle: {
              fontSize: 12,
            },
          },
        },
        {
          type: "pie",
          name: "验收次数:",
          value: item.value,
          radius: ["30%", "32%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "72%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#e8c561",
              // fontSize: 30,
            },
          },
          label: {
            normal: {
              show: true,
              position: "center",
              padding: [60, 45, 0, 40],
              align: "center",
              width: 70,
              height: 70,
              lineHeight: 14, // 控制\n的行高
              fontSize: 8,
              formatter: function (param) {
                return (
                  "{a| " + param.seriesName + "}" + "{b|" + item.indxVl1 + "}"
                );
              },
              rich: {
                a: {
                  fontSize: 12,
                  color: "#fff",
                  lineHeight: 23,
                },
                b: {
                  fontSize: 12,
                  color: "#ffe900",
                  lineHeight: 23,
                },
              },
            },
          },
          data: [20],
        },
        {
          type: "pie",
          name: "验收合格数:",
          radius: [0, "28.5%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "25%" : "72%",
          ],
          data: [20],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#041b2d",
            },
          },
          label: {
            normal: {
              show: true,
              position: "center",
              padding: [180, 45, 0, 40],
              align: "center",
              width: 70,
              height: 160,
              lineHeight: 14, // 控制\n的行高
              fontSize: 34,
              formatter: function (param) {
                return (
                  "{a| " + param.seriesName + "}" + "{b|" + item.indxVl2 + "}"
                );
              },
              rich: {
                a: {
                  fontSize: 10,
                  color: "#fff",
                  lineHeight: 23,
                },
                b: {
                  fontSize: 10,
                  color: "#e92438",
                  lineHeight: 23,
                },
              },
            },
          },
        }
      );
    });
    var option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
